<template>
  <div id="style_shell">
    <div id="system" ref="system">
      <!--    左侧导航栏-->
      <div id="manual">
        <Manual></Manual>
      </div>
      <div id="displayArea">
        <!--      头部导航栏-->
        <NavigationBar></NavigationBar>
        <!--      展示页面-->
        <div id="displayArea_main">
          <!--        通过设置:include="setAlive"与组件name对比，只有setAlive数组内包含的的页面，会开启缓存状态， 相当于router-meta中设定keepalive的进阶版本-->
          <keep-alive :include="setAlive">
            <router-view :key="key"></router-view>
          </keep-alive>
          <!--        <router-view v-if="!$route.meta.keepAlive" :key="key"></router-view>-->
        </div>
      </div>
    </div>
    <div id="banner">
      <div>@copyright by hercule_poirt</div>
      <div></div>
      <div></div>
    </div>
  </div>
</template>

<script>
import Manual from "../components/Manual";
import NavigationBar from "../components/NavigationBar";

export default {
  name: "System",
  components: {
    Manual,
    NavigationBar
  },
  data() {
    return {
      setAlive: this.$store.state.alivelist
    }
  },
  computed: {
    key() {
      return this.$route.path
    }
  },
  methods: {
    setAliveFun() {
      this.setAlive = this.$store.state.alivelist;
    }
  },
  watch: {
    $route(to, from) {
      this.setAliveFun();
      this.$store.commit('change');
    }
  },
  mounted() {
    //挂载后才能获取到dom
    //当有overflow:hidden时，body.clientHeight才是真实值，documentElement.clientHeight是没有滚动条的值。
    this.$refs.system.style.height = document.body.clientHeight + 'px';
    this.$refs.system.style.width = document.body.clientWidth + 'px';
  }
}
</script>

<style scoped>
#style_shell {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow:hidden;
}

#system {
  width: 100%;
  display: flex;
  flex-direction: row;
}

#manual {
  min-width: 155px;
  height: 100%;
  color: white;
  background-color: #438aff;
}

#displayArea {
  flex-grow: 1;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}

#displayArea_main {
  width: 100%;
  height: calc(100% - 32px); /*css3运算符 calc()中 运算符号要加空格才会生效，如“ - ”*/
}

#banner {
  height: 100px;
  width: 100%;
  background: #383838;
}

#banner :nth-child(1) {
  text-align: center;
  color: #ebebeb;
  font-size: 17px;
  line-height: 100px;
}

#banner:nth-child(2) {
}

#banner:nth-child(3) {

}
</style>